<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>头像</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css"/>
    <link rel="stylesheet" href="__CROPPER__/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="__CROPPER__/css/bootstrap.min.css">
    <link rel="stylesheet" href="__CROPPER__/css/cropper.css">
    <link rel="stylesheet" href="__CROPPER__/css/main.css">
    <style>
        body {
            background-color: #F4F4F4;
        }

        .outer {
            background-color: #FFFFFF;
            height: 64px;
            line-height: 64px;
            margin-top: 10.5px;
        }

        .inner {
            margin: 0 17.5px;
        }

        .avatar {
            width: 45.5px;
            height: 45.5px;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle;
        }

        .arrow {
            width: 22px;
            height: 64px;
            background: url(__IMG__/right_arrow.png) no-repeat right center;
            background-size: 7.5px 12.8px;
        }

        .outer1 {
            background-color: #FFFFFF;
            height: 45px;
            line-height: 45px;
        }

        input[type="text"] {
            height: 43.9px;
            width: 100%;
            background-color: #fff;
            text-align: right;
            color: #545454;
            font-size: 14px;
            padding-right: 0;
        }

        input::-webkit-input-placeholder {
            color: #999;
            font-size: 14px;
        }

        .outer2 {
            background-color: #FFFFFF;
            height: 123px;
        }

        .title {
            color: #555555;
            font-size: 15px;

        }

    </style>
    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            z-index: 20;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 44px;
        }

        .aui-icon-tu {
            height: 2.2rem;
            width: 44px;
            background: url(__IMG__/back.png) no-repeat center center;
            background-size: 44px 44px;
        }

        .create {
            font-size: 15px;
            color: #FFFFFF;
            width: 100%;
            height: 2.55rem;
            line-height: 2.55rem;
            text-align: center;
            background: -webkit-linear-gradient(right, #F04040, #FF7A7A);
            position: fixed;
            left: 0;
            bottom: 2.5rem;
        }
        .row{
            margin: 0;
        }
        button{
            border-radius: 10px;
        }
    </style>
</head>

<body>

<header class="aui-bar aui-bar-nav underLine">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1);"> <span class="aui-iconfont aui-icon-tu"> </span>
    </a>
    <div class="aui-title">个人信息</div>
    <!--<a class="aui-pull-right" >
    <span class="aui-iconfont" tapmode="active" onclick="right()">保存</span>
    </a>-->
</header>
<form id="fabuorder">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="img-container">
                    <img id="image" src="{$imgsrc}" alt="Picture">
                </div>
            </div>
            <div class="col-md-3">
                <div class="docs-preview clearfix">
                    <!--<div class="img-preview preview-lg"></div>-->
                    <!--<div class="img-preview preview-md"></div>-->

                </div>

            </div>
        </div>

        <div class="row" style="width: 100%;text-align: center;margin: 0;">
            <div class="col-md-9 docs-buttons">
                <div class="btn-group">
                    <!--<button type="button" class="btn btn-primary" data-method="reset" title="Reset">-->
                        <!--<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;reset&quot;)">-->
                            <!--<span class="fa fa-refresh"></span>-->
                        <!--</span>-->
                    <!--</button>-->
                    <!--<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">-->
                        <!--<input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">-->
                        <!--<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs">-->
                            <!--<span class="fa fa-upload"></span>-->
                        <!--</span>-->
                    <!--</label>-->
                    <!--<button type="button" class="btn btn-primary" data-method="destroy" title="Destroy">-->
                        <!--<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;destroy&quot;)">-->
                            <!--<span class="fa fa-power-off"></span>-->
                        <!--</span>-->
                    <!--</button>-->
                    <button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }">
                        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false">
                            确定
                        </span>
                    </button>
                    <button type="button" class="btn btn-danger" style="margin-left: 20px;" onclick="history.go(-1);">取消</button>
                </div>
                <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body"></div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<textarea id="base64Img" class="hidden"></textarea>
<!--{include file="public/footer" /}-->
<script src="__CROPPER__/js/jquery-1.10.2.js"></script>
<script src="__CROPPER__/js/bootstrap.bundle.min.js"></script>
<script src="__CROPPER__/js/cropper.js"></script>
<script src="__CROPPER__/js/jquery-cropper.js"></script>
<script src="__CROPPER__/js/main.js"></script>
<script type="text/javascript">

</script>

</html>
